<template>
    <div class="pop-icon-tool-tip">
        <mrc_ess_Popover :scrim="mobile" :name="props.name" ref="mrcEssPopoverRef" :open-on-hover="props.openOnHover" :disabled="props.disabled"
            @open="emit('open')" @close="emit('close')">
            <template v-slot:btn>
                <slot name="btn">
                    <!-- 触发按钮 -->
                    <div class="flex align-center justify-center relative" :style="{
                        width: (props.iconWidth || props.iconSize) + 'px',
                        height: (props.iconHeight || props.iconSize) + 'px',
                        backgroundColor: props.iconBg,
                        borderRadius: props.iconRadius
                    }">
                        <div>
                            <svg-icon :iconClass="props.icon" :size="props.iconSize"></svg-icon>
                            <!-- Badge -->
                            <div class="badge-number absolute text-[10px] font-[400] rounded-[50%] w-[16px] h-[16px] flex align-center justify-center bg-primary text-white"
                                v-if="badge">
                                {{ badge }}
                            </div>
                        </div>
                    </div>
                </slot>
            </template>
            <template v-slot:default>
                <div :class="{
                    'max-h-[80vh]': mobile == false,
                    'max-w-[50vw]': mobile == false,
                    'max-w-[80vw]': mobile == true,
                    'max-h-[60vh]': mobile == true,
                }">
                    <slot name="default">
                        <v-card class="pl-4 pr-4 pt-4 pb-4 rounded-[16px] scroll_content_y !overflow-y-auto" :class="{
                    'max-h-[80vh]': mobile == false,
                    'max-w-[50vw]': mobile == false,
                    'max-w-[80vw]': mobile == true,
                    'max-h-[60vh]': mobile == true,
                }">
                            <mrc_ess_RichTextHtml :text="props.text"></mrc_ess_RichTextHtml>
                        </v-card>
                    </slot>
                </div>
            </template>
        </mrc_ess_Popover>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const emit = defineEmits(["open", "close"]);
const mrcEssPopoverRef = ref<any>(null);
import { useDisplay } from 'vuetify'
const { mobile } = useDisplay()
const props = defineProps({
    disabled: {
        type: Boolean,
        default: false
    },
    icon: {
        type: String,
        default: "information"
    },
    text: {
        type: [String, Number],
        default: ""
    },
    iconSize: {
        type: [String, Number],
        default: "20"
    },
    iconColor: {
        type: String,
        default: "#1C243699"
    },
    iconBg: {
        type: String,
        default: ""
    },
    iconWidth: {
        type: [String, Number],
        default: ""
    },
    iconHeight: {
        type: [String, Number],
        default: ""
    },
    iconRadius: {
        type: [String, Number],
        default: ""
    },
    openOnHover: {
        type: Boolean,
        default: true
    },
    badge: {
        type: [String, Number],
        default: ""
    },
    name: {
        type: String,
        default: ""
    }
})
/**
 * 关闭对话框
 */
 function close() {
    mrcEssPopoverRef.value.close();
}
/**
 * 显示对话框
 */
function open() {
    mrcEssPopoverRef.value.open();
}
defineExpose({
    close,
    open
})
</script>

<style scoped>
.badge-number {
    right: 0;
    top: 0;
    transform: translateX(6px);
    letter-spacing: 0.004em;
}
</style>
